
<script>
export default {
  name: "Login",
  data(){
    return{
      captchaUrl: "",
      loginForm:{
        username:"",
        password:"",
      },
      checked: true,
      rules:{
        username:[{required:true,message:"请输入用户名",trigger:"blur"},{ min: 5, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' }
        ],
        password:[{required:true,message:"请输入密码",trigger:"blur"},,{ min: 6,  message: '密码长度要大于6', trigger: 'blur' }],

      },

     
}
}
    
  },
  methods:{
    returnWelcome(){
      this.$router.push('/welcome')
    },
    rigster(){
      
    },
    submitLogin(){
      this.$axios
        .get("http://localhost:8888/users/login", {
          params: {
            username: this.loginForm.username,
            password: this.loginForm.password,
          }
        })
        .then((response) => {
          sessionStorage.setItem("username",this.loginForm.username);
          if(response.data.status==10000){
            this.$message({
              message: "登录成功",
              type: "success",
              
            });
            this.$router.push('/Home')
          }else{
          console.log(response.data.msg);
            this.$message.error({
              type:"error",
              message:response.data.msg
            })
          }
        })
      },
      reset(){
        this.loginForm.username=''
        this.loginForm.password=''
        this.$message.success({
          type:"success",
          message:"重置成功"
        })
        }
    }
  }
  

</script>

<template>
<!--  <h1>欢迎来到登录页面</h1>-->
  <div class="body">
    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
      <h3 class="loginTitle">
        欢迎登录
      </h3>
      <el-form ref="loginFormRef">
        <el-form-item prop="username">
        <el-input 
        type="text" 
        v-model="loginForm.username" 
        placeholder="亲，请输入用户名" >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input 
        type="password" 
        v-model="loginForm.password" 
        placeholder="亲，请输入密码" >
        </el-input>
      </el-form-item>
      </el-form>
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
      
      <el-button type="primary" class="resetButton" @click="reset">重置</el-button>
      <el-button type="primary" class="returnWelcome" @click="returnWelcome">返回主页面</el-button>
      <el-button type="primary" class="register" @click="rigster">注册</el-button>
      <el-button type="primary" style="width:95%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>

  <el-dialog :title="dialogTitle" v-model="dialogFormVisible" width="800px" top="5vh" center>
        <div class="info">
            <el-form :model="form" ref="bookForm" :rules="rules">
                <!-- 类别下拉框 -->
                <el-form-item prop="category" label-width="0px">
                    <el-select v-model="form.categoryId" placeholder="请选择类型" style="width: 100%">
                        <el-option label="前端" value="1"></el-option>
                        <el-option label="后端" value="2"></el-option>
                        <el-option label="测试" value="3"></el-option>
                        <el-option label="产品" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 书名 -->
                <el-form-item prop="bookName" label-width="0px">
                    <el-input v-model="form.bookName" placeholder="请输入书名" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 子标题 -->
                <el-form-item prop="subTitle" label-width="0px">
                    <el-input v-model="form.subTitle" placeholder="请输入子标题" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 作者 -->
                <el-form-item prop="author" label-width="0px">
                    <el-input v-model="form.author" placeholder="请输入作者" autocomplete="off"></el-input>
                </el-form-item>
                <!-- wangEditor容器 -->
                <div ref="editor" style="width: 100%"></div>
            </el-form>
            <span class="dialog-footer">
                <!-- 提交按钮 -->
              <el-button type="primary" v-on:click="onSubmit('bookForm')" style="width: 100%">确认提交</el-button>
            </span>
        </div>
    </el-dialog>

</template>
<style lang="less" scoped>
.register{
  width: 35%;
  margin: 5px 20px 10px 20px;
  float: right;
}
.resetButton{
  width: 20%;
  margin: 6px 15px 15px 200px;
}
.returnWelcome{
  width: 30%;
  margin: 5px 20px 10px 20px;
}
.loginContainer{
  border-radius: 15px;
  background-clip: padding-box;
  text-align: left;
  margin: auto;
  margin-top: 180px;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: aliceblue;
  border:1px solid blueviolet;
  box-shadow: 0 0 25px #f885ff;
}
.loginTitle{
  margin: 0px auto 48px auto;
  text-align: center;
  font-size: 40px;
}
.loginRemember{
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.body{
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/background.jpg") ;
  background-size:100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>








